import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../../../../../util/adapt';
import {
  APP_BLACK,
  APP_GRAY,
  APP_RED,
  APP_YELLOW,
  APP_SECOND_GREY
} from '../../../../../../../../constant/color';
import { CONTENT_WIDTH } from '../../../../constant';

export default StyleSheet.create({
  container: {
    height: phonePx(122),
    width: CONTENT_WIDTH,
    borderRadius: phonePx(8),
    backgroundColor: '#ffffff',
    paddingTop: phonePx(16),
    paddingRight: phonePx(13),
    paddingBottom: phonePx(12),
    paddingLeft: phonePx(18)
  },
  shadow: {
    height: phonePx(122),
    width: CONTENT_WIDTH,
    shadowColor: 'rgba(136, 136, 136, 0.05)',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 4,
    shadowRadius: 4,
    marginTop: phonePx(12)
  },
  loadTitle: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  spuTag: {
    marginLeft: phonePx(-20),
    width: phonePx(14),
    height: phonePx(16)
  },
  title: {
    marginLeft: phonePx(8),
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500'
  },
  loadTag: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    position: 'absolute',
    right: phonePx(13),
    top: phonePx(16)
  },
  line1: {
    width: phonePx(2),
    height: phonePx(10),
    backgroundColor: APP_YELLOW,
    borderRadius: phonePx(2),
    marginRight: phonePx(2)
  },
  line2: {
    width: phonePx(2),
    height: phonePx(15),
    backgroundColor: APP_YELLOW,
    borderRadius: phonePx(1),
    marginRight: phonePx(2)
  },
  tag: {},
  tagDesc: {
    position: 'absolute',
    left: phonePx(6),
    top: phonePx(3),
    fontSize: phonePx(9),
    color: APP_BLACK,
    fontWeight: '500'
  },
  name: {
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '500'
  },
  time: {
    fontSize: phonePx(12),
    color: APP_SECOND_GREY,
    fontWeight: '500',
    marginTop: phonePx(5)
  },
  loadBottomInfo: {
    marginTop: phonePx(14),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end'
  },
  noTeacherContent: {
    justifyContent: 'center'
  },
  noTeacher: {
    color: APP_SECOND_GREY,
    fontSize: phonePx(12)
  },
  teacherContent: {
    height: phonePx(45),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start'
  },
  teacher: {
    height: phonePx(45),
    marginRight: phonePx(12),
    alignItems: 'center'
  },
  teacherIcon: {
    width: phonePx(30),
    height: phonePx(30),
    borderRadius: phonePx(15)
  },
  teacherName: {
    color: APP_GRAY,
    fontSize: phonePx(10),
    marginTop: phonePx(5)
  },
  info: {
    alignItems: 'flex-end'
  },
  num: {
    fontSize: phonePx(10),
    color: APP_SECOND_GREY,
    fontWeight: '500',
    marginTop: phonePx(6)
  },
  price: {
    fontSize: phonePx(20),
    color: APP_RED,
    fontWeight: '500'
  },
  symbol: {
    fontSize: phonePx(12),
    color: APP_RED,
    fontWeight: '500'
  }
});
